<template>
	<div>
		<!-- search搜索 start -->
		<van-search v-model="value" placeholder="请输入搜索关键词" @input="input"/>
		<div class="search" v-show='!search'>
			<div class="hui">
				<div class="commendMian" v-for="(tui,i) in list" :key='i'>
					<img class="commendImg" :src="tui.picUrl" />
					<span class="flet">{{tui.name}}</span>
					<div class="commendyuan">
						<span>¥{{tui.retailPrice}}元</span>
					</div>
					<div class="commendNumber">
						<span>{{tui.retailPrice-90}}人购买</span>
						<!-- <van-icon name="shopping-cart" color="#F688A4" size="30" /> van-icon中这个组件没有引入用是 -->  
					</div>
				</div>
			</div>
		</div>
		<!-- search搜索 end -->
		<div v-show='search'>
		
			<div class="Fletdi">
				<van-sidebar class='classify'  v-model="activeKey">
					<van-sidebar-item @click="byValueID(category)" v-for='category in categoryList' :title="category.name" />
				</van-sidebar>
				<div>
					
					<van-image  class='tu' fit="contain" width="300" height="100" :src="currentCategory.picUrl" />
					<div class="commend">
						<span>{{currentCategory.name}}分类</span>
					</div>
					
					<van-grid :column-num="3" >
						<van-grid-item v-for='(currentSub,i) in currentSubCategory' :icon="currentSub.picUrl"  :text="currentSub.name"  />
					</van-grid>
				</div>
		
			</div>
		
		
		</div>
		
	</div>
</template>

<script>
	import API from '../utils/API.js'
	import {
		Sidebar,
		SidebarItem,
		Search,
		Grid,
		GridItem,
		Image
	} from 'vant';
	export default {
		data() {
			return {
				search:true,
				value:'',
				list:'',
				activeKey: '',
				categoryList:[],
				currentCategory:{},
				currentSubCategory:[]
			};
		},
		components: {
			[Sidebar.name]: Sidebar,
			[SidebarItem.name]: SidebarItem,
			[Search.name]: Search,
			[Grid.name]: Grid,
			[GridItem.name]: GridItem,
			[Image.name]: Image,

		},
		methods: {
		byValueID(category){
			this.$router.push({
				path:'/classify',
				query:{
					id:category.id
				}
			})
			
			console.log(category.id)
			this.$get(API.GET_CATALOG_CURRENT,{id:this.$route.query.id})
			.then(res => 
			{
					this.currentCategory = res.data.data.currentCategory
					this.currentSubCategory = res.data.data.currentSubCategory
				 console.log(res.data.data)
				
			}
			)
		},
		input() {
			console.log(this.value)
			this.$get(API.GET_GOODS_LIST,{
				keyword:this.value
			})
			.then( res => {
				console.log(res)
				if(this.value ==''){
					this.search = true
				}else{
					this.search = false
				}
				this.list = res.data.data.list
			}) 
		},
		

		},
			created(){
				console.log(this.$route.query.id)
				this.$get(API.GET_CATALOG_INDEX,{
					id:this.$route.query.id
				})
				.then(res => 
				{
					// console.log(res)   左边分类自动配置 没弄
					 this.categoryList = res.data.data.categoryList
					this.currentCategory = res.data.data.currentCategory
					this.currentSubCategory = res.data.data.currentSubCategory
					// console.log(res.data.data)
				})
			}
	};
</script>

<style lang="less" scoped>
	.Fletdi {
		display:flex;
	}

	.commend {
		display: flex;
		padding: 20px 20px;
		font-size: 3px;

	}

	.commend span:nth-child(2) {
		color: #969696;
	}

	.commend span:nth-child(1) {
		position: relative;
		flex: 1;
		text-align: center;
		font-size: 13px;
	}

	.commend span:nth-child(1)::after {
		position: absolute;
		content: "";
		top: 6px;
		right: 20px;
		width: 62px;
		height: 4px;
		display: block;
		background-color: #F688A4;
	}

	.commend span:nth-child(1)::before {
		position: absolute;
		content: "";
		top: 6px;
		left: 20px;
		width: 62px;
		height: 4px;
		display: block;
		background-color: #F688A4;
	}
	.tu{
		
		padding-top: 19px;
		padding-left: 12px;
		border: 0;
		
	}
	.classify{
		width: 200px;
	}
	// 搜索
	/* 推荐商品 */
	.hui {
		display: flex;
		flex-wrap: wrap;
	
	}
	
	.commend {
		display: flex;
	
		padding: 20px 20px;
		font-size: 3px;
	
	}
	
	.commend span:nth-child(2) {
		color: #969696;
	}
	
	.commend span:nth-child(1) {
		position: relative;
		flex: 1;
		text-align: center;
		font-size: 13px;
	}
	
	.commend span:nth-child(1)::after {
		position: absolute;
		content: "";
		top: 6px;
		right: 34px;
		width: 62px;
		height: 4px;
		display: block;
		background-color: #F688A4;
	}
	
	.commend span:nth-child(1)::before {
		position: absolute;
		content: "";
		top: 6px;
		left: 34px;
		width: 62px;
		height: 4px;
		display: block;
		background-color: #F688A4;
	}
	
	.commendMian {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 5px 10px 0;
		width: 191px;
		height: 199px;
		background-color: #ffffff;
		box-sizing: border-box;
		border-right: 0;
		/* 解决相邻border重合加粗问题 */
		margin: 0 -1px -1px 0;
		border: 1px solid #b5b5b5;
	}
	
	.commendMian:nth-child(odd) {
		border-left: 0;
	}
	
	.commendMian:nth-child(2n) {
		border-right: 0;
	
	}
	
	.commendMian:nth-child(1) {
		border-top: 0;
	}
	
	.commendMian:nth-child(2) {
		border-top: 0;
	}
	
	.flet {
		margin-left: -5px;
	
	}
	
	.commendImg {
		width: 139px;
		height: 91px;
		margin-bottom: 5px;
	}
	
	.commendyuan {
		margin-top: 6px;
		color: red;
		font-weight: 550;
	}
	
	.commendyuan span:nth-child(2) {
		margin-left: 5px;
		color: #98989F;
		text-decoration: line-through;
	}
	
	.commendNumber {
	
		display: flex;
		padding-right: 15px;
		margin-top: 10px;
		font-size: 14px;
	}
	
	.commendNumber span:nth-child(1) {
		flex: 1;
	}
</style>
